<template>
    <div>
        <!--        <el-card class="!border-none mb-4" shadow="never">-->
        <!--            <el-form-->
        <!--                class="mb-[-16px]"-->
        <!--                :model="queryParams"-->
        <!--                inline-->
        <!--            >-->
        <!--                <el-form-item label="等级名称" prop="name">-->
        <!--                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入等级名称" />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="升级所需里程" prop="licheng">-->
        <!--                    <el-input class="w-[280px]" v-model="queryParams.licheng" clearable placeholder="请输入升级所需里程" />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="封面图" prop="fengmian_image">-->
        <!--                    <el-input class="w-[280px]" v-model="queryParams.fengmian_image" clearable placeholder="请输入封面图" />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="权益图" prop="quanyi_image">-->
        <!--                    <el-input class="w-[280px]" v-model="queryParams.quanyi_image" clearable placeholder="请输入权益图" />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="等级icon图标" prop="dengji_icon_image">-->
        <!--                    <el-input class="w-[280px]" v-model="queryParams.dengji_icon_image" clearable placeholder="请输入等级icon图标" />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="赠送优惠券" prop="coupon_json">-->
        <!--                    <el-input class="w-[280px]" v-model="queryParams.coupon_json" clearable placeholder="请输入赠送优惠券" />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item>-->
        <!--                    <el-button type="primary" @click="resetPage">查询</el-button>-->
        <!--                    <el-button @click="resetParams">重置</el-button>-->
        <!--                </el-form-item>-->
        <!--            </el-form>-->
        <!--        </el-card>-->
        <el-card class='!border-none' v-loading='pager.loading' shadow='never'>
            <!--            <el-button v-perms="['levelconfig/add']" type='primary' @click='handleAdd'>-->
            <!--                <template #icon>-->
            <!--                    <icon name='el-icon-Plus' />-->
            <!--                </template>-->
            <!--                新增-->
            <!--            </el-button>-->
            <!--            <el-button-->
            <!--                v-perms="['levelconfig/delete']"-->
            <!--                :disabled='!selectData.length'-->
            <!--                @click='handleDelete(selectData)'-->
            <!--            >-->
            <!--                删除-->
            <!--            </el-button>-->
            <div class='mt-4'>
                <el-table :data='tableData' @selection-change='handleSelectionChange'>
                    <el-table-column type='selection' width='55' />
                    <el-table-column label='等级名称' prop='name' show-overflow-tooltip />
                    <el-table-column label='升级所需里程' prop='licheng' show-overflow-tooltip />
                    <el-table-column label='封面图' prop='fengmian_image'>
                        <template #default='{row}'>
                            <el-image :src='row.fengmian_image' />
                        </template>
                    </el-table-column>
                    <el-table-column label='权益图' prop='quanyi_image'>
                        <template #default='{row}'>
                            <el-image :src='row.quanyi_image' />
                        </template>
                    </el-table-column>
                    <el-table-column label='等级icon图标' prop='dengji_icon_image'>
                        <template #default='{row}'>
                            <el-image :src='row.dengji_icon_image' />
                        </template>
                    </el-table-column>
                    <el-table-column label='赠送优惠券' prop='coupon_json'>
                        <template #default='{row}'>
                            <span>{{ row.couponCount }}张</span>
                        </template>
                    </el-table-column>
                    <el-table-column label='操作' width='120' fixed='right'>
                        <template #default='{ row }'>
                            <el-button
                                v-perms="['levelconfig/edit']"
                                type='primary'
                                link
                                @click='handleEdit(row)'
                            >
                                编辑
                            </el-button>
                            <!--                            <el-button-->
                            <!--                                v-perms="['levelconfig/delete']"-->
                            <!--                                type='danger'-->
                            <!--                                link-->
                            <!--                                @click='handleDelete(row.id)'-->
                            <!--                            >-->
                            <!--                                删除-->
                            <!--                            </el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class='flex mt-4 justify-end'>
                <pagination v-model='pager' @change='getLists' />
            </div>
        </el-card>
        <edit-popup v-if='showEdit' ref='editRef' :dict-data='dictData' @success='getLists' @close='showEdit = false' />
    </div>
</template>

<script lang='ts' setup name='levelconfigLists'>
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiLevelconfigLists, apiLevelconfigDelete } from '@/api/levelconfig'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'


const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)


// 查询条件
const queryParams = reactive({
    name: '',
    licheng: '',
    fengmian_image: '',
    quanyi_image: '',
    dengji_icon_image: '',
    coupon_json: ''
})

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiLevelconfigLists,
    params: queryParams
})
const tableData = computed(() => {
    return pager.lists.map(item => {
        console.log(item, 'item')
        let couponCount = 0
        const { coupon_json } = item
        if (coupon_json) {
            const list = JSON.parse(coupon_json)
            if (Array.isArray(list)) couponCount = list.length
        }
        item.couponCount = couponCount
        return item
    })
})
// 添加
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

// 编辑
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.getDetail(data)
    // editRef.value?.open('edit')
    // editRef.value?.setFormData(data)
}

// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiLevelconfigDelete({ id })
    getLists()
}

getLists()
</script>

